<template>
<div class="cell" :class="{selected}">
  <div class="icon-container">
    <v-icon class="icon" :name="data.icon" v-if="data.iconType == ICON_TYPE.icon"></v-icon>
    <div v-else-if="data.iconType == ICON_TYPE.font" class="icon font-icon">
      {{data.icon}}
    </div>
  </div>
  <div class="title">{{data.title}}</div>
  <label v-if="editable" class="create-trigger tag" @click="$emit('createChildren')">
    <span>新增</span>
  </label>
</div>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      required: true,
    },
    editable: {
      type: Boolean,
      default: false,
    },
    selected: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ICON_TYPE: {
      get: function() {
        return ICON_TYPE;
      },
    },
  }
}
export const ICON_TYPE = {
  "font": "font",
  "icon": "icon"
};
export const DATA_TYPE = {
  title: "标题", icon: "无", iconType: "font", children: null,
};
</script>
<style lang="stylus" scoped>
$smallPaddingHorizontal()
  padding-left .25rem;
  padding-right: .25rem;


$defaultColorScheme()
  background: white
  color: #333
  .tag
    background-color: white
    color: #ddd
  .icon-container
    background: #ddd;
    color: #eee;
  &.selected
    background-color: #d1e8ff
    color: #4c98e4
    .icon-container
      background-color: #7cbdff;
      color: white;

$defaultLayout()
  h = 30px;
  offsetLeft = 2rem;
  ratio = 0.75
  height: h;
  font-size h * ratio
  line-height: h;
  $smallPaddingHorizontal()
  margin-left: offsetLeft;
  .tag
  .icon-container
    height h * ratio
    line-height: h * ratio;
    margin: h * (0.5 - ratio/2)
    font-size h * ratio * 0.8
    $smallPaddingHorizontal()
    border-radius 2px
  .title
  .icon-container
    display: inline-block
  .tag 
    float: right
  .icon-container
    float: left
    margin-right 0.7rem
    >.font-icon
    >.icon
      display inline-block
      vertical-align middle
    &::after
      content: ''
      display inline-block
      height h * ratio
      vertical-align middle
  &.selected
    border-radius: 2px

$defaultTheme()
  $defaultLayout()
  $defaultColorScheme()

activeTheme = $defaultTheme

.cell
  activeTheme(activeLayout)
</style>